<template>
  <view class="cancel-order-box">
    <ve-card>
      <ve-form :model="form">
        <ve-form-item v-if="REFUND_AMOUNT_RESULT.refundAmount != null" prop="refundAmount" label="可退款总额" unit="元">
          <ve-input-number v-model="form.refundAmount" />
        </ve-form-item>
        <ve-form-item prop="breachAmount" label="违约金" unit="元">
          <ve-input-number v-model="form.breachAmount" />
        </ve-form-item>
        <ve-form-item>
          <view class="description-box">
            <view class="desc-num" v-if="REFUND_AMOUNT_RESULT.refundAmount != null && form.breachAmount != null">
              违约金抵扣后可退款总额：{{
                decimal.sub(form.refundAmount || 0, form.breachAmount || 0) < 0
                  ? 0
                  : decimal.sub(form.refundAmount || 0, form.breachAmount || 0)
              }}
              元
            </view>
            <view class="desc-text"> 违约金 &lt; 退款总额，则生成退款及违约金2笔费项，且退款金额直接抵扣至违约金。 </view>
            <view class="desc-text"> 违约金 ≥ 退款总额，则退款全额自动抵扣违约金，生成2笔费项，且退款默认为已结算。 </view>
          </view>
        </ve-form-item>
        <ve-form-item prop="cancelRemark" label="备注" labelPosition="top" :borderBottom="false">
          <ve-input type="textarea" v-model="form.cancelRemark" placeholder="请输入备注" />
        </ve-form-item>
      </ve-form>
    </ve-card>
  </view>

  <ve-bottom-box>
    <ve-button type="primary" @click="onClick" style="width: 100%">确认</ve-button>
  </ve-bottom-box>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { cancelOrderAPI, calcPriceAPI } from '@/api/order/sOrder'
  import { onLoad } from '@dcloudio/uni-app'
  import { useLoadDataAndHotUpdateNavigateBack } from '@/hooks/useListNavigate'
  import decimal from '@/utils/calculation'

  const form = ref<any>({})

  // 获取可退款总额和违约金
  const REFUND_AMOUNT_RESULT = ref<any>({})
  // 获取取消订单详情
  const getCancelOrderDetail = (data: any) => {
    calcPriceAPI(data).then((res: any) => {
      const { result } = res
      REFUND_AMOUNT_RESULT.value = result
      form.value.id = data.id

      // 可退款总额大于0，则回填并显示
      if (result.refundAmount > 0) {
        form.value.refundAmount = result.refundAmount
      } else {
        form.value.refundAmount = 0
      }

      // 违约金为null表示门店未启用门店取消规则
      if (result.breachAmount != null) {
        if (result.breachAmount > 0) {
          // 违约金大于0，则回填并显示
          form.value.breachAmount = result.breachAmount
        } else if (result.refundAmount == null) {
          // 没有可退款总额，则违约金默认为空
          form.value.breachAmount = null
        } else {
          form.value.breachAmount = 0
        }
      }
    })
  }

  const onClick = () => {
    cancelOrderAPI(form.value).then(() => {
      uni.showToast({
        title: '取消订单成功',
        icon: 'none',
      })
      useLoadDataAndHotUpdateNavigateBack()
    })
  }

  onLoad((options: any) => {
    getCancelOrderDetail(options)
  })
</script>

<style lang="less" scoped>
  page {
    background-color: #f7f8fa;
  }
  .cancel-order-box {
    padding: 24rpx 24rpx;
    .description-box {
      font-weight: 400;
      font-size: 14px;
      color: #8491a8;

      .desc-num {
        margin-bottom: 6px;
      }

      .desc-text {
        margin-bottom: 6px;
        font-size: 12px;
        color: #f53f3f;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
